import React from 'react';
import { Route, NavLink } from 'react-router-dom';
import BackNav from 'shared/components/BackNav';
import AddressManage from './AddressManage';
import Coupon from './Coupon';
import FocusWare from './FocusWare';
import Order from './Order';
import PersonDetails from './PersonDetails';
import SalesService from './SalesService';
import PersonalInfoCard from './Components/PersonalInfoCard';
import Refund from './SalesService/Refund';
import RefundOrder from './RefundOrder';

import './index.less';

export default class Account extends React.PureComponent {
  render() {
    const { url } = this.props.match;
    return (
      [
        <BackNav key="account-backNav" title="会员中心" />,
        <div className="account" key="account">
          <ul className="account-menu">
            <li>会员中心</li>
            <li><NavLink to={`${url}/person-details`} activeClassName="active">个人信息</NavLink></li>
            <li><NavLink to={`${url}/order`} activeClassName="active">我的订单</NavLink></li>
            <li><NavLink to={`${url}/focusware`} activeClassName="active">我的关注</NavLink></li>
            <li><NavLink to={`${url}/coupon`} activeClassName="active">我的优惠券</NavLink></li>
            <li><NavLink to={`${url}/addressManage`} activeClassName="active">地址管理</NavLink></li>
            <li><NavLink to={`${url}/sales-service`} activeClassName="active">售后服务</NavLink></li>
          </ul>
          <div className="account-content">
            <PersonalInfoCard />
            <Route path={`${url}/addressManage`} component={AddressManage} />
            <Route path={`${url}/coupon`} component={Coupon} />
            <Route path={`${url}/focusware`} component={FocusWare} />
            <Route path={`${url}/order`} component={Order} />
            <Route path={`${url}/person-details`} component={PersonDetails} />
            <Route path={`${url}/sales-service`} component={SalesService} />
            <Route path={`${url}/refund/:id`} component={Refund} />
            <Route path={`${url}/refundOrder/:id/:index`} component={RefundOrder} />
          </div>
        </div>
      ]
    )
  }
}